<template>
<div class="content">
  <head title="My orders"></head>
  <scroller class="navbar" scroll-direction="horizontal">
    <text
      v-for="(item, index) in navList"
      :key="index"
      class="nav-item"
      :ref="'item'+index"
      @click="tabClick(index)"
      :class="[tabCurrentIndex == index?'current':'']"
    >{{ item.text }}</text>
  </scroller>
  <slider class="slider" @change="slideChange" :index="tabCurrentIndex">
    <scroller
      class="listScroll"
      v-for="(item, index) in navList"
      :key="index"
      @loadmore="onloadmore"
      loadmoreoffset="200"
      :show-scrollbar="false"
    >
      <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
        <floading class="indicators"></floading>
      </refresh>
      <div
        v-if="item.orderList.length>0"
        v-for="(list, index2) in item.orderList"
        :key="index2"
        class="listItem"
        @click="e=>goUrl('root:app/user/order_list/order_details.js',{id:list.id})"
      >
        <div class="titList">
          <div class="titLeft">
            <text class="titname" v-if="list.title">{{list.title }}</text>
            <text class="titname" v-if="list.list&&list.list[0]">{{ list.list[0].title}}</text>

            <text class="iconfont titIcon" v-if="list.title||(list.list&&list.list[0])">&#xe6a1;</text>
          </div>
          <text
            class="status"
          >{{list.type_2==1?"Unshipped":list.type_2==2?"Shipped":list.type_2==3?"Received":"Unpaid" }}</text>
        </div>
        <div class="titList">
          <image v-if="list.thumb" class="imgList" :src="list.thumb" />
          <image
            v-if="!list.thumb"
            class="imgList"
            v-for="(imageu,indexc) in list.list"
            :key="indexc"
            :src="imageu.thumb"
          />

          <text class="iconfont imgIcon">&#xe6a1;</text>
        </div>
        <div class="bottomList">
          <text class="num">{{list.number}} item</text>
          <text class="total">Total</text>
          <text class="symbol">AU$</text>
          <text class="money">{{list.pay_price}}</text>
        </div>
        <!-- type=3  	  已支付 -->
        <!-- type=1 2 	未支付 -->
        <!-- type_2=1  	已支付 未发货-->
        <div
          class="actionBox"
          v-if="list.type==1||list.type==2"
          @click="event=> event.stopPropagation()"
        >
          <text class="actionItem" @click="cancelOrder(list,index2)">Cancel order</text>
        </div>
        <!-- type_2=2  	已发货 -->
        <div class="actionBox" v-if="list.type_2==2" @click="event=> event.stopPropagation()">
          <!-- <text
            class="actionItem"
            @click="goUrl('root:app/user/order_list/order_details.js',{id:list.id})"
          >Delivery tracking</text> -->
          <text class="actionItem" @click="received(list.id)">Item received</text>
          <!-- <text class="actionItem" @click="refund(list.id)">Refund</text> -->
        </div>
        <!-- type_2=3   已收货 -->
        <div class="actionBox" v-if="list.type_2==3" @click="event=> event.stopPropagation()">
          <text>Order completed</text>
          <!-- 评价 -->
          <text
            v-if="list.goods_type==1"
            class="actionItem"
            @click="goUrl('root:app/user/order_list/evaluation.js',{id:list.id})"
          >Review</text>
        </div>
      </div>

      <empty v-if="item.orderList.length==0" tips="Your order is empty"></empty>
    </scroller>
  </slider>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import { get_order_co_list, del_order_co } from "../../../mixin/ajax.js";
import asCore from "../../../mixin/core";
const updataList = new BroadcastChannel("updataList");
export default {
  data() {
    return {
      tabCurrentIndex: 0,
      page: 1,
      userId: "",
      refreshing: false,
      navList: [
        {
          hasMore: true,
          state: 0,
          text: "All",
          page: 1,
          loadingType: "more",
          total: 0,
          orderList: []
        },
        {
          hasMore: true,
          state: 1,
          page: 1,
          text: "Unpaid",
          loadingType: "more",
          total: 0,
          orderList: []
        },
        {
          hasMore: true,
          state: 2,
          text: "Unshipped",
          page: 1,
          loadingType: "more",
          total: 0,
          orderList: []
        },
        {
          hasMore: true,
          state: 3,
          text: "Shipped",
          page: 1,
          loadingType: "more",
          total: 0,
          orderList: []
        }
      ]
    };
  },
  created() {
    var pref = weex.requireModule("storage");
    pref.getItem("orderType", event => {
      if (event.data) {
        this.tabCurrentIndex = event.data - 0;
      }
    });
    let that = this;
    updataList.onmessage = function() {
      that.getOrderList("fresh");
    };
  },
  methods: {
    onLoad(param) {
      let type = 0;
      if (param && param.param) {
        return false;
      }
      if (param && param.type) {
        this.tabCurrentIndex = param.type - 0;
      }

      asCore.getBsessionid(userId => {
        this.userId = userId;
        this.getOrderList();
      });
    },
    cancelOrder(item, index) {
      this.isLoading = true;
      del_order_co(
        { users_id: this.userId, co_order_id: item.id },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
            }
          }
        }
      );
    },
    onrefresh(event) {
      var s = this;
      s.refreshing = true;
      s.getOrderList("fresh");
    },
    onloadmore() {
      this.getOrderList();
    },
    getOrderList(source) {
      let index = this.tabCurrentIndex;
      let navItem = this.navList[index];
      if (source === "tabChange" && navItem.loaded === true) {
        //tab切换只有第一次需要加载数据
        return;
      }
      if (source == "fresh") {
        navItem.hasMore = true;
        navItem.page = 1;
      }
      if (navItem.loadingType === "loading" || !navItem.hasMore) {
        //防止重复加载
        return;
      }
      navItem.loadingType = "loading";
      let type =
        this.tabCurrentIndex == 1 ? 2 : this.tabCurrentIndex == 0 ? "" : "3";
      let type_2 =
        this.tabCurrentIndex == 2
          ? 1
          : this.tabCurrentIndex == 3
          ? "2"
          : this.tabCurrentIndex == 4
          ? "3"
          : "";
      if (source == "fresh") {
        this.isLoading = false;
      } else {
        this.isLoading = true;
      }

      get_order_co_list(
        {
          users_id: this.userId,
          type: type,
          type_2: type_2,
          page: navItem.page
        },
        (res, flag) => {
          this.isLoading = false;
          this.refreshing = false;
          if (flag) {
            if (navItem.page == 1) {
              navItem.orderList = res.data.list;
            } else {
              navItem.orderList = navItem.orderList.concat(res.data.list);
            }
            navItem.page++;
            this.$set(navItem, "total", res.data.total);
            this.$set(navItem, "loaded", true);
            if (navItem.orderList.length == res.data.total) {
              this.$set(navItem, "hasMore", false);
            }
            navItem.loadingType = "more";
          }
        }
      );
    },
    goDelivery() {
      this.push("root:app/user/order_list/delivery.js", {
        name: "ssss"
      });
    },

    refund() {
      this.push("root:app/user/order_list/refund.js", {
        name: "ssss"
      });
    },
    goUrl(url, parmar) {
      this.push(url, parmar);
    },

    tabClick(index) {
      if (this.tabCurrentIndex == index) {
        return false;
      }
      this.tabCurrentIndex = index;
      this.getOrderList("tabChange");
    },
    slideChange(index) {
      if (this.tabCurrentIndex == index.index) {
        return false;
      }
      this.tabCurrentIndex = index.index;
      this.getOrderList("tabChange");
      const ref = this.$refs["item" + index.index];
      const el = ref ? ref[0] : null;
      const dom = weex.requireModule("dom");

      dom.scrollToElement(el, {
        offset: -250
      });
    }
  }
};
</script>

<style scoped>
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicators {
  height: 40px;
  width: 40px;
  margin: 20px;
}
.indicator {
  height: 40px;
  width: 40px;
}
.content {
  background-color: #f5f5f5;
  flex: 1;
}

.navbar {
  height: 90px;
  width: 750px;
  flex-direction: row;
}

.nav-item {
  height: 90px;
  padding: 0 20px;
  margin: 0 30px;
  line-height: 90px;
  font-size: 30px;
  color: #333333;
}

.current {
  border-bottom-color: #ba8833;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  color: #ba8833;
}

.slider {
  flex: 1;
  position: relative;
}

.listScroll {
  flex: 1;
  background-color: #f5f5f5;
}

.listItem {
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 32px;
  width: 750px;
}

.listItem:active {
  background-color: #f2f2f2;
}

.titList {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.titLeft {
  flex-direction: row;
  align-items: center;
}

.imgList {
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.titname {
  font-size: 28px;
  color: #333;
  margin-right: 20px;
  width: 420px;
  lines: 1;

  text-overflow: ellipsis;
}

.iconfont {
  font-family: iconfont;
}

.titIcon {
  font-size: 24px;
  color: #999999;
}

.imgIcon {
  font-size: 32px;
  color: #999999;
}

.status {
  font-size: 28px;
  color: #ec414d;
}

.bottomList {
  flex-direction: row;
  align-items: center;
  padding-bottom: 20px;
  border-bottom-color: #e6e6e6;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.num {
  margin-right: 40px;
  font-size: 22px;
  color: #8e8e93;
}

.total {
  font-size: 22px;
  color: #8e8e93;
}

.symbol {
  font-size: 22px;
  color: #ec414d;
  margin: 0 10px;
}

.money {
  font-size: 22px;
  color: #ec414d;
}
.refresh {
  width: 750px;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

.actionBox {
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
}

.actionItem {
  font-size: 28px;
  color: #333333;
  padding: 5px 10px;
  line-height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #333333;
  margin-left: 10px;
}

.actionItem:active {
  border-color: #cccccc;
  background-color: #cccccc;
}
</style>
